<template>
  <div>
    <nav-bar title="实时检统计"></nav-bar>
    <div class="realTimeStatistical maxinBox">
      <div class="backgroundfff" style="padding: 10px;">
        <div class="title">
          <div>实时检查</div>
        </div>
        <van-row class="todayShow center" v-if="realTimeStatistical">
          <van-col :span="8">
            <div>
              <label class="fontSize16">今日新增</label>
              <div class="color999 fontSize14">{{realTimeStatistical.todayCount}}</div>
            </div>
          </van-col>
          <van-col :span="8">
           <div>
             <label class="fontSize16">累计待整改</label>
             <div class="color999 fontSize14">{{realTimeStatistical.waitCount}}%</div>
           </div>
          </van-col>
          <van-col :span="8">
            <div>
              <label class="fontSize16">累计完成率</label>
              <div class="color999 fontSize14">{{realTimeStatistical.completedRate}}%</div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="12" class="title">
            <div>
              实时检问题类别统计
            </div>
          </van-col>
          <van-col :span="12" style="text-align: right;margin-top: 0.625rem;" @click="">
            <span style="color: #10AEFF;" class="fontSize14" @click="more">更多<van-icon name="arrow" /></span>
          </van-col>
        </van-row>
        <my-echarts id="myChat" :options="chatData"></my-echarts>
      </div>
      <div class="marginTop5 plr10 backgroundfff">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              实时检问题新增趋势(单位:件)
            </div>
          </van-col>
        </van-row>
        <my-echarts id="myChat1" :options="chatData1"></my-echarts>
      </div>
    </div>
  </div>
</template>

<script>
  import realTimeInspectionAPI from '../../../../api/workAPI/realTimeInspectionAPI.js'
  import MyEcharts from '../../../../components/MyChart.vue'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        realTimeType: [],
        realTimeTypeData: [],
        realTimeDate: [],
        realTimeDateData: [],
        realTimeStatistical: null,
        chatData1: null,
        chatData: null
      }
    },
    methods:{
      more() {
        this.$router.push({
          path:'/TypeStatistical'
        })
      },
      getRealTimeToday() {
        let projectId = localStorage.getItem('projectId')
        realTimeInspectionAPI.getRealTimeToday(projectId).then(res => {
          this.realTimeStatistical = res
          this.realTimeTypeData = res.categoryReportList.map(item => {
            return {
              name: item.categoryName,
              value: item.count
            }
          })
          this.realTimeType = res.categoryReportList.map(item => {
            return item.categoryName
          })
          this.realTimeDate = res.dayReportList.map(item => {
            return item.date
          })
          this.realTimeDateData = res.dayReportList.map(item => {
            return item.count
          })
          this.chatData1 = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.realTimeDate
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增',
                    type: 'line',
                    stack: '总量',
                    data: this.realTimeDateData,
                    itemStyle : {
                      normal : {
                        color:'#1577FF', //改变折线点的颜色
                        lineStyle:{
                          color:'#1577FF' //改变折线颜色
                        }
                      }
                    },
                }
            ]
          }
          this.chatData = {
            title: {
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },
            legend: {
              left: 'center',
              top: 'bottom',
              data: this.realTimeType
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            visualMap: {
                show: false,
                min: 80,
                max: 600
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: this.realTimeTypeData.sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        color: 'rgba(0, 0, 0, 0.8)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.8)'
                        },
                        smooth: 0.2,
                        length: 10,
                        length2: 20
                    },
                    itemStyle: {
                        color: ['#52b5fb'],
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.1)'
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
          }
        })
      }
    },
    mounted() {
      this.getRealTimeToday()
    }
  }
</script>

<style scoped lang="scss">
  .title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
